<template>
  <div class="user-map">
    <!-- 筛选 -->
    <div class="option">
      <el-select v-model="platformValue" placeholder="请选择">
        <el-option
          v-for="item in platformOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="terminalValue" placeholder="请选择">
        <el-option
          v-for="item in terminalOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="numValue" placeholder="请选择">
        <el-option
          v-for="item in numOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div class="data-message">
        <div class="message">
          不选择时间区间时，展示累计总数据
        </div>
        <el-date-picker
          v-model="dateVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="getData"
        ></el-date-picker>
      </div>
    </div>
    <!-- 地图容器 -->
    <div class="ech">
      <div id="echarts-box"></div>
    </div>
    <!-- 图表 -->
    <div class="table">
      <el-table :data="provinceData" border tooltip-effect="dark" style="width: 100%">
        <el-table-column
          prop="address"
          label="省级分布"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitCnt"
          label="访客人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitPercent"
          label="访客在全部访客中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginCnt"
          label="登录用户人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginPercent"
          label="登录用户在全部登录用户中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <el-table :data="cityData" border tooltip-effect="dark" style="width: 100%">
        <el-table-column
          prop="address"
          label="市级分布"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitCnt"
          label="访客人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitPercent"
          label="访客在全部访客中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginCnt"
          label="登录用户人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginPercent"
          label="登录用户在全部登录用户中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>

      <el-table :data="countryData" border tooltip-effect="dark" style="width: 100%">
        <el-table-column
          prop="address"
          label="国家分布"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitCnt"
          label="访客人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitPercent"
          label="访客在全部访客中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginCnt"
          label="登录用户人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginPercent"
          label="登录用户在全部登录用户中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import '@/utils/china.js';
  import enums from '@/config/ENUMS.js';

  export default {
    data() {
      return {
        // 筛选的选项
        platformOption: enums.productLineSl,
        terminalOption: enums.terminalSl,
        numOption: [
          {
            value: '0',
            label: '访客人数',
          },
          {
            value: '1',
            label: '登录人数',
          },
        ],
        // 四个筛选
        platformValue: 'jm',
        terminalValue: 'all',
        numValue: '0',
        dateVal: '',
        //不能选择当前日期之后的时间
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > new Date().getTime() - 86400000;
          },
        },
        // 三个表格
        countryData: [],
        provinceData: [],
        cityData: [],
        // 数据
        chartData: [],
        // 最大值
        max1: 0,
        // 配置
        optionMap: {
          backgroundColor: '#fff',
          tooltip: {
            textStyle: {
              color: '#fff',
            },
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,.5)',
            color: '#fff',
            formatter: function(params, ticket, callback) {
              // 加params.data是防止南海诸岛那里报错
              if (params.data && params.data.children.length > 0) {
                let str =
                  params.data.name +
                  '：' +
                  params.data.value +
                  ' (' +
                  params.data.percent +
                  ')<hr/>';
                params.data.children.forEach((item) => {
                  str += item.name + '：' + item.value + ' (' + item.percent + ')<br/>';
                });
                return str;
              } else if (params.data) {
                return (
                  params.data.name + '：' + params.data.value + ' (' + params.data.percent + ')'
                );
              } else {
                return '';
              }
            },
          },
          //左侧小导航图标
          visualMap: {
            show: true,
            min: 0,
            max: 100,
            left: '0',
            top: '60%',
            color: ['#184cc2', '#4198f2', '#8bc9f5', '#c2e2f5', '#ecf6fb'],
          },
          //配置属性
          series: [
            {
              name: '数量',
              type: 'map',
              //地图类型，支持world，china及全国34个省市自治区
              mapType: 'china',
              // 不可点击
              selectedMode: 'false',
              label: {
                normal: {
                  //省份名称
                  show: true,
                  color: '#000',
                },
              },
              itemStyle: {
                areaColor: '#fff',
                // 触发的颜色
                emphasis: {
                  areaColor: '#409cff',
                },
              },
              // 选中颜色
              select: {
                itemStyle: {
                  areaColor: '#409cff',
                },
              },
              //数据
              data: [],
            },
          ],
        },
      };
    },
    watch: {
      platformValue(val) {
        if (val) {
          this.getData();
        }
      },
      terminalValue(val) {
        if (val) {
          this.getData();
        }
      },
      numValue(val) {
        if (val) {
          this.getData();
        }
      },
    },
    methods: {
      // 初始化echarts
      initEcharts() {
        let myChart = this.$echarts.init(document.getElementById('echarts-box'));
        this.optionMap.series[0].data = this.chartData;
        // this.optionMap.visualMap.max = this.max1;
        //使用制定的配置项和数据显示图表
        this.optionMap && myChart.setOption(this.optionMap);
      },
      // 转换属性
      tran(org) {
        let haveChildren = Array.isArray(org.child) && org.child.length > 0;
        return {
          name: org.address,
          value: org.userCnt,
          percent: org.percent,
          children: haveChildren ? org.child.map((i) => this.tran(i)) : [],
        };
      },
      // 得到数据
      getData() {
        // 地图数据
        this.$service
          .StatisGeo({
            os: this.terminalValue,
            pt: this.platformValue,
            userType: this.numValue,
            startDate: this.dateVal && this.dateVal[0] ? this.dateVal[0] : '',
            endDate: this.dateVal && this.dateVal[1] ? this.dateVal[1] : '',
          })
          .then((res) => {
            this.chartData = res.getGeoList.map((org) => this.tran(org));
            // 找出最大值
            this.chartData.forEach((item) => {
              if (item.value > this.max1) {
                this.max1 = item.value;
              }
            });
            this.initEcharts();
          });
        // 表格数据
        this.$service
          .StatisGeoChart({
            os: this.terminalValue,
            pt: this.platformValue,
            userType: this.numValue,
            startDate: this.dateVal && this.dateVal[0] ? this.dateVal[0] : '',
            endDate: this.dateVal && this.dateVal[1] ? this.dateVal[1] : '',
          })
          .then((res) => {
            this.countryData = res.country;
            this.provinceData = res.province;
            this.cityData = res.city;
          });
      },
    },
    created() {},
    mounted() {
      this.getData();
    },
  };
</script>
<style lang="less" scoped>
  .user-map {
    width: 100%;
    .option {
      text-align: center;
      /deep/ .el-select {
        margin-right: 20px;
      }
      .data-message {
        display: inline-block;
        .message {
          color: #409eff;
          font-size: 12px;
          text-align: left;
        }
      }
    }
    .ech {
      display: flex;
      justify-content: space-around;
      height: 600px;
      width: 100%;
      #echarts-box {
        width: 800px;
        height: 600px;
      }
    }
    .table {
      margin: 60px;
      border-top: 1px solid #000;
      /deep/ .el-table {
        margin-top: 20px;
      }
    }
  }
</style>
